<template>
  <view class="page">
      <customer-head :customer="customerHeader"/>
    <view class="top">
        <view class="flex j-content-between gray fsize1">
            <text class="time fl1 th" >拜访时间</text>
            <text class="proto fl1 th" >拍照门头</text>
        </view>
    </view>
    <scroll-view class="content" :style="{height: contentHeight + 'px'}" scroll-y="true" @scrolltolower="queryData">
        <view v-for="(item,i) in list" class="flex j-content-between a-item list-m"  @tap="jumpVisitRecord(item)">
            <view class='f-shrink time fl1'>{{ item.busDate }}</view>
            <view class='f-shrink proto flex j-content fl1'>
                <image :src="item.doorwayPhotoUrl" class="size" @click.stop="previewImage(i)"></image>
            </view>
        </view>
        <end-temp v-show="end"></end-temp>
    </scroll-view>
  </view>
</template>

<script>
import {getCustomerHeader, history, visitRecord} from "../../service/api/shoprecord";
import endTemp from "../../components/endTemp";
import {getScreen, setImage} from "../../service/auth";
import customerHead from "@/order/components/customerHead.vue";
import request from "@/service";
import {getbasCustomerSellingPointList} from "@/service/api/logistics";
export default {
    name:'detail',
    components:{endTemp,customerHead},
    props:{
    },
    data() {
        return {
            contentHeight:0,
            customerId:0,
            customerName:'',
            page:1,
            size:20,
            end:false,
            list:[],
            customerHeader:{}
        }
    },
    onLoad(option){
        this.customerId=option.customerId
        this.keyword = option.keyword
        this.onGet()
        this.getCustomer()

    },
    created() {
    const {width,height} = getScreen()
    this.contentHeight = height - (0 * width / 750)
  },
    methods: {
        onGet(){
            const data={
                customerId:this.customerId,
                customerKeyword:this.keyword,
                page:this.page,
                size:this.size
            }
            visitRecord(data).then(res=>{
                if (res.status === 200){
                    this.customerName=res.data.content[0].customerName
                    if (res.data.content.length < this.size)
                        this.end=true
                    this.list=this.list.concat(res.data.content)
                }
            })
        },
        jumpVisitRecord(item){
            uni.navigateTo({url:`/order/shoprecord/visitRecord?customerHeader=${JSON.stringify(this.customerHeader)}&customerVisitRecordId=${item.id}&busDate=${item.busDate}`})
        },
        getCustomer(){
            getCustomerHeader({customerId:this.customerId}).then(res=>{
                if (res.status === 200){
                    this.customerHeader = res.data
                    this.$set(this.customerHeader,'image',setImage(this.customerHeader.imageUrl))
                }
            })
        },
        queryData(){
            if(this.end)return
            this.page++
            this.onGet()
        },
        previewImage(i){
            const imgs=this.list.map(item=>{
                return item.doorwayPhotoUrl
            })
            uni.previewImage({
                urls:imgs,
                current:i
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.page{
    background-color: #f6f7f7;
    .top{
        padding:0 20rpx;
        background-color: white;
        text{
            display: block;
            padding-bottom:15rpx;
        }
        .fsize{
            font-size: 26rpx;
            border-bottom: 1rpx solid #f1f1f1;
        }
        .fsize1{
            font-size: 24rpx;
            padding-top: 10rpx;
        }
    }
    .content{
        .size{
            width: 100rpx;
            height: 100rpx;
        }
        .list-m{
            margin-top: 1rpx;
          background: white;
          width: 100%;
        }
    }
}
.f-shrink{
    flex-shrink: 0;
}
.th{
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
}
            .time{
                width: 33%;
              text-align: center;
              color: #808080;
            }
            .proto{
                width: 33%;
                text-align: center;
            }
            .menoy{
                width: 33%;
                text-align: right;
                word-break: break-all
            }
</style>